<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="/css/total/signup.css">
    <title>登录</title>
    <% include ../component/common_meta.html %>
</head>

<body>
    <div id="app" style="height:100%">
        <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
        <div v-cloak class="cloak">
            <div class="content">
                <div class="bgPhone" v-if="!loginInfo.isSend">
                    <p>手机号登录</p>
                    <span>+86</span>
                    <input class="phone" id="phone" v-model="loginInfo.phone" placeholder="请输入手机号码" @keyup="handleKeyDown" autofocus="autofocus">
                    <button @click="handleSend" class="sendBtn">{{smsText}}</button>
                </div>
                <div class="bgCode" v-if="!loginInfo.isSend">
                    <p>请输入验证码</p>
                    <p class="bgCodeText">已发送至手机{{loginInfo.phone}}
                        <span @click="handleSend">重新发送（{{smsText}}）</span>
                    </p>
                    <input type="number" id="smsCode" v-model="loginInfo.sms" maxlength="6" @keyUp="handleGetSms" autofocus="autofocus">
                    <ul class="dvCode">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <button @click="handleEnter" class="loginEnterBtn">登录</button>
                </div>
                <div class="codeMode" v-if="loginInfo.mode">
                    <p>验证码已发送 请注意查收
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://sfile.tl100.com/js/libs/vue.min.js"></script>
    <script src="https://sfile.tl100.com/js/libs/axios.min.js"></script>
    <script src="/js/api.js"></script>
    <script src="/js/login/login.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                smsText: '发送',
                loginInfo: {
                    phone: '',
                    sms: '',
                    smsNum: '',
                    isSend: false,
                    mode: false,
                },
            },
            mounted () {
              console.log('<%=code%>');
                
            },
            methods: {
                handleKeyDown() {
                    if (this.loginInfo.phone.length == 0) {
                        document.querySelector('.sendBtn').style.opacity = 0.5;
                    } else {
                        document.querySelector('.sendBtn').style.opacity = 1;
                    }
                },
                handleSend: function () {
                    // 发送验证码接口
                    send(this);
                    document.querySelector('.sendBtn').disabled = true;
                    document.querySelector('.sendBtn').style.opacity = 0.5;
                },
                handleEnter: function () {
                    var vm = this;
                    if (vm.enter) {
                        return;
                    }
                    if (vm.loginInfo.phone == "") {
                        alert('请填写手机号！');
                        return;
                    }
                    if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(vm.loginInfo.phone))) {
                        alert("请输入正确的手机号码！");
                        return false;
                    }
                    if (vm.loginInfo.sms == "") {
                        alert('请填写验证码！');
                        return;
                    }
                    document.querySelector('.loginEnterBtn').disabled = true;
                    setTimeout(function () {
                        document.querySelector('.loginEnterBtn').disabled = false;
                    }, 600)
                    document.querySelector('.loginEnterBtn').style.opacity = 0.5;
                    vm.enter = true;
                    api.post('/api/v2/user/login', {
                        phone: vm.loginInfo.phone,
                        sms_code: vm.loginInfo.sms,
                        code: "<%=code%>",
                        origin: "<%=origin%>"
                    }).then(function (res) {
                        if (res.data.res_code == 1) {
                            localStorage.setItem('token', res.data.data.token);
                            window.location.href = window.location.search.slice(1,window.location.search.length)
                        } else {
                            alert(res.data.msg);
                            vm.loginInfo.sms = '';
                            var liObj = document.querySelectorAll('.dvCode>li');
                            for (var i = 0; i < liObj.length; i++) {
                                liObj[i].innerHTML = ''
                            }
                            document.querySelector('.loginEnterBtn').disabled = false;
                            document.querySelector('.loginEnterBtn').style.opacity = 0.5;
                            vm.enter = false;
                            setLog('/api/v2/user/login:fail', JSON.stringify(res.data));
                        }
                    }).catch(function (err) {
                        alert('登录超时，请刷新页面重试！');
                        setLog('/api/v2/user/login:catch', JSON.stringify(err));
                        vm.enter = false;
                    });
                },
                getNum() {   // 输入  
                    for (var i = 0; i < this.loginInfo.sms.length; i++) {
                        this.loginInfo.smsArr[i].value = this.loginInfo.sms.charAt(i)
                    }
                },
                handleGetSms() {
                    var liObj = document.querySelectorAll('.dvCode>li');
                    for (var i = 0; i < liObj.length; i++) {
                        liObj[i].innerHTML = this.loginInfo.sms.charAt(i)
                    }
                    if (this.loginInfo.sms.length < 6) {
                        document.querySelector('.loginEnterBtn').style.opacity = 0.5;
                        document.querySelector('.loginEnterBtn').disabled = true;
                    } else {
                        document.querySelector('.loginEnterBtn').style.opacity = 1;
                        document.querySelector('.loginEnterBtn').disabled = false;
                    }
                },
            }
        })
    </script>
</body>

</html>